<!-- eslint-disable vue/no-v-html -->
<template>
  <div>
    <el-card
      v-for="bodyListItem in bodyList"
      :key="bodyListItem"
    >
      <el-descriptions
        :title="bodyListItem.title"
        :column="1"
        border
      >
        <template
          #extra
        >
          <div id="bodyBottonStyle">
            <el-button
              v-loading="false"
              type="danger"
              @click="() => {console.log('Dashboard层的body没有设置submitFunction')}"
            >
              禁用
            </el-button>
            <DialogButton
              v-for="bodyDialogBottonItem in bodyListItem.bodyDialogButtonList"
              :key="bodyDialogBottonItem"
              :botton-text="bodyDialogBottonItem.dialogBottonText"
              :dialog-title="bodyDialogBottonItem.dialogTitle"
              :submit-function="bodyDialogBottonItem.submitFunction"
            >
              <template #body>
                <div
                  v-html="bodyDialogBottonItem.dialogBody"
                />
              </template>
            </DialogButton>
          </div>
        </template>
        <el-descriptions-item>
          <template #label>
            <div>
              <el-icon>
                <Coin />
              </el-icon>
              积分
            </div>
          </template>
          shitWord
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup>
import DialogButton from '@/components/DialogButton.vue'
onMounted(() => {
})

const props = defineProps({
  bodyList: {
    type: Array,
    default: () => [
      {
        bodyDialogButtonList: {
          type: Array,
          default: () => [
            {
              dialogBottonText: {
                type: String,
                default: '1'
              },
              dialogTitle: {
                type: String,
                default: 'Dashboard层的body没有设置dialogTitle'
              },
              dialogBody: {
                type: String,
                default: '<p><strong>Dashboard</strong>层的body没有设置dialogBody</p>'
              },
              submitFunction: {
                type: Function,
                default: () => {
                  ElMessage({
                    message: 'Dashboard层的body没有设置submitFunction',
                    type: 'error'
                  })
                }
              }
            }
          ]
        },
        bodyDataList: {
          type: Object,
          default: () => {
            return {
              label: ['数据名1', '数据名2'],
              value: ['数据名1', '数据名2']
            }
          }
        },
        title: {
          type: String,
          default: 'Dashboard层的body没有设置title'
        }
      }
    ]
  }
})
</script>

<style scoped>
#bodyBottonStyle {
  display: flex;
  flex-direction: row;
}
</style>
